<!DOCTYPE html>
<html>

<head>
    <title> Add React to Website</title>
    <!--  https://reactjs.org/docs/add-react-to-a-website.html  -->
    <!--  https://www.babeljs.cn/docs/babel-standalone  -->

    <!-- 
        React - the React top level API
        React DOM - adds DOM-specific methods
        Babel - a JavaScript compiler that lets us use ES6+ in old browsers 
    -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <p>This is a simple html</p>
    <p>Add React to Website</p>

    <div id="like_button_container"></div>

</body>

</html>
<!-- Load React Component -->
<!-- text/bacel is mandatory for using Babel -->
<script type="text/babel">
    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = { liked: false };
        }

        render() {
            if (this.state.liked) {
                return "You liked this.";
            }

            return (
                <button onClick={() => this.setState({ liked: true })}>Like</button>
            )
        }
    }
    const domContainer = document.querySelector('#like_button_container');
    ReactDOM.render(<div><LikeButton /></div>, domContainer);
</script>